<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:52:"F:\chat/application/push\view\index\cart_client.html";i:1572416124;}*/ ?>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <META HTTP-EQUIV="pragma" content="no-cache">
    <META HTTP-EQUIV="Cache-Control" content="no-store, must-revalidate">
    <META HTTP-EQUIV="expires" content="0">
    <meta name="renderer" content="webkit">
    <meta name="searchtitle" content="一对一聊天">
    <meta name="title" content="一对一聊天">
    <meta name="description" content="一对一聊天" />
    <meta name="keywords" content="一对一聊天" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>一对一聊天</title>



    <script type="text/javascript">
        //WebSocket = null;
    </script>
    <link href="/public/chat/css/bootstrap.min.css" rel="stylesheet">
    <link href="/public/chat/css/style.css" rel="stylesheet">
    <!-- Include these three JS files: -->
    <script type="text/javascript" src="/public/chat/js/swfobject.js"></script>
    <script type="text/javascript" src="/public/chat/js/web_socket.js"></script>
    <script type="text/javascript" src="/public/chat/js/jquery.min.js"></script>

    <script type="text/javascript">
        if (typeof console == "undefined") {
            this.console = {
                log: function(msg) {}
            };
        }
        // 如果浏览器不支持websocket，会使用这个flash自动模拟websocket协议，此过程对开发者透明
        WEB_SOCKET_SWF_LOCATION = "/public/chat/swf/WebSocketMain.swf";
        // 开启flash的websocket debug
        WEB_SOCKET_DEBUG = true;

        var ws, name, client_list = {};

        // 连接服务端
        function connect() {
            $('#dialog').scrollTop($('#dialog')[0].scrollHeight);
            // 创建websocket
            // alert("ws://"+document.domain+":7272");
            ws = new WebSocket("ws://" + document.domain + ":7272");
            // ws = new WebSocket("ws://192.168.0.104:7272");
            // 当socket连接打开时，输入用户名
            ws.onopen = onopen;
            // 当有消息时根据消息类型显示不同信息
            ws.onmessage = onmessage;
            ws.onclose = function() {
                console.log("连接关闭，定时重连");
                connect();
            };
            ws.onerror = function() {
                console.log("出现错误");
            };
        }

        // 连接建立时发送登录信息
        function onopen() {
            var name = "<?php echo $userinfo['nickname']; ?>";
            var user_id = "<?php echo $userinfo['id']; ?>";
            console.log(name, user_id)

            // 登录
            var login_data = '{"type":"login_client","client_name":"' + name.replace(/"/g, '\\"') + '","user_id":"' + user_id + '"}';
            console.log("websocket握手成功，发送登录数据:" + login_data);
            ws.send(login_data);
        }

        // 服务端发来消息时
        function onmessage(e) {
            console.log(e.data);
            var data = eval("(" + e.data + ")");
            switch (data['type']) {
                // 服务端ping客户端
                case 'ping':
                    ws.send('{"type":"pong"}');
                    break;
                    // 登录 更新用户列表
                case 'login_client':
                    //{"type":"login","client_id":xxx,"client_name":"xxx","client_list":"[...]","time":"xxx"}
                    console.log(data['client_name'] + "登录成功");
                    break;
                    // 发言
                case 'say_client':
                    //{"type":"say","from_client_id":xxx,"to_client_id":"all/client_id","content":"xxx","time":"xxx"}
                    say(data['from_client_id'], data['from_client_name'], data['content'], data['time']);
                    break;
                    // 自己发言
                case 'say_client_mi':
                    //{"type":"say","from_client_id":xxx,"to_client_id":"all/client_id","content":"xxx","time":"xxx"}
                    saymi(data['from_client_id'], data['from_client_name'], data['content'], data['time']);
                    break;
                    // 用户退出 更新用户列表
                case 'logout':
                    //{"type":"logout","client_id":xxx,"time":"xxx"}
                    say(data['from_client_id'], data['from_client_name'], data['from_client_name'] + ' 退出了', data['time']);
                    delete client_list[data['from_client_id']];
            }
        }


        // 提交对话
        function onSubmit() {
            var user_id = "<?php echo $userinfo['id']; ?>";
            var other_id = "<?php echo $otherinfo['id']; ?>";
            var room_id = "<?php echo $room_id; ?>";
            var input = document.getElementById("textarea");
            var to_client_name = $("#client_list option:selected").text();
            console.log('{"type":"say_client","room_id":"' + room_id + '","user_id":"' + user_id + '","other_id":"' + other_id + '","to_client_name":"' + to_client_name + '","content":"' + input.value.replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '"}');
            ws.send('{"type":"say_client","room_id":"' + room_id + '","user_id":"' + user_id + '","other_id":"' + other_id + '","to_client_name":"' + to_client_name + '","content":"' + input.value.replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '"}');
            input.value = "";
            input.focus();
        }


        // 发言
        function say(from_client_id, from_client_name, content, time) {
            $("#dialog").append('<div class="speech_item"><img style="width:40px;" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=915110866,2827234579&fm=27&gp=0.jpg" class="user_icon" /> ' + from_client_name + ' <br> ' + time + '<div style="clear:both;"></div><p class="triangle-isosceles top">' + content + '</p> </div>');
            $('#dialog').scrollTop($('#dialog')[0].scrollHeight);
        }

        // 自己发言
        function saymi(from_client_id, from_client_name, content, time) {
            $("#dialog").append('<div class="speech_item1"><img style="width:40px;" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=915110866,2827234579&fm=27&gp=0.jpg" class="user_icon1" /> ' + from_client_name + ' <br> ' + time + '<div style="clear:both;"></div><p class="triangle-isosceles top1">' + content + '</p> </div>');
            $('#dialog').scrollTop($('#dialog')[0].scrollHeight);
        }
    </script>
</head>
<style>
    #dialog {
        height: 400px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
</style>

<body onload="connect();">
    <?php echo $otherinfo['nickname']; ?>
    <div class="container">
        <div class="row clearfix">
            <div class="col-sm-12 column">
                <div class="thumbnail">
                    <div class="caption" id="dialog">
                        <?php if(is_array($chat) || $chat instanceof \think\Collection || $chat instanceof \think\Paginator): $i = 0; $__LIST__ = $chat;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$vo): $mod = ($i % 2 );++$i;if($vo['user_id'] != $userinfo['id']): ?>
                        <div class="speech_item"><img style="width:40px;" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=915110866,2827234579&amp;fm=27&amp;gp=0.jpg" class="user_icon"> <?php echo $vo['name']; ?> <br> <?php echo date("Y-m-d H:i:s",$vo['created_time']); ?>
                            <div style="clear:both;">
                            </div>
                            <p class="triangle-isosceles top"><?php echo $vo['content']; ?></p>
                        </div>
                        <?php else: ?>
                        <div class="speech_item1"><img style="width:40px;" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=915110866,2827234579&amp;fm=27&amp;gp=0.jpg" class="user_icon1"> <?php echo $vo['name']; ?> <br> <?php echo date("Y-m-d H:i:s",$vo['created_time']); ?>
                            <div style="clear:both;">
                            </div>
                            <p class="triangle-isosceles top1"><?php echo $vo['content']; ?></p>
                        </div>
                        <?php endif; endforeach; endif; else: echo "" ;endif; ?>
                    </div>
                </div>
                <form onsubmit="onSubmit(); return false;">
                    <textarea class="textarea thumbnail" id="textarea"></textarea>
                    <div class="say-btn"><input type="submit" class="btn btn-default" value="发表" /></div>
                </form>
            </div>
        </div>
    </div>
</body>

</html>